import React, { useRef, useState, useEffect } from 'react';
import PageA from './PageA';
import PageB from './PageB';
import CircleTransition from './CircleTransition';
import { AnimatePresence } from 'framer-motion';

const Index = () => {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setNumber(2000);
      setTimeout(() => {
        setNumber(0);
      }, 4000);
    }, 3000);
  }, []);

  return (
    <div className="w-screen h-screen relative">
      <div className="fixed top-0 left-0 w-full h-full z-[8]">
        <PageA></PageA>
      </div>
      <div
        className="fixed top-0 left-0 w-full h-full z-10 transition-all duration-[3000ms]"
        style={{
          clipPath: `circle(${number}px at 50% 50%)`,
        }}
      >
        <PageB></PageB>
      </div>
    </div>
  );
};

export default Index;
